<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页器</title>
    <style>
        .pagination{
            display: flex;
            width: 500px;
            height: 30px;
            border: 1px solid red;
        }
        .pagination span a {
            box-sizing: border-box;
            text-decoration: none;
            color: black;
        }
        .pagination span {
            /* border: 1px solid red; */
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 0px 2px;
        }
        .pagination span i {
            font-size: 10px;
            font-weight: 100;
        }
        .pagination span img{
            width: 30px;
            height: 30px;
        }
        .pagination .pageStyle a {
            display: block;
            text-align: center;
            width: 30px;
            height: 30px;
            line-height: 30px;
            /* background-color: bisque; */
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .pagination .pageStyle a:hover {
            border: 1px solid rgb(27, 129, 121);
        } 
        .pagination .active{
            background-color: cadetblue;
        }
        .container {
            margin: 0 auto;
            width: 700px;
            height: auto;
        }
    </style>
    <script src="../js/tools.js"></script>
    <script src="../js/api_v1.js"></script>
</head>
<body>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div class="pagination">
        </div>
    </div>
    
    <script>
        class PageClass {
            constructor( ele , pageNum , page , cb ){
                this.ele = ele ; 
                this.pageNum = pageNum ; 
                this.page = page ; 
                this.cb = cb ; 
                this.renderPage() ;
                this.operate();
            }
            renderPage(){
                let str = '' ;
                if( this.pageNum > 5 ){
                    if( this.page < 3 ){
                        for( let i = 0 ; i < 5 ; i ++ ){
                            if( (i+1) == this.page ){
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;
                            } else {
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;
                            }
                        } 
                        str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;
                    } else if (  this.page > 3 && this.page < this.pageNum - 3  ){
                        str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; 
                        for( let i = page - 3 ; i < page + 2 ; i ++ ){
                            if( (i+1) == page ){
                                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;
                                } else {
                                    str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;
                                }
                            } 
                        str += `<span><i>•••</i></span><span class="pageStyle" myPage="${this.pageNum}"><a href="javascript:;">${this.pageNum}</a></span>` ;
                    } else if ( this.page >= this.pageNum - 3){
                        str += `<span class="pageStyle" myPage="1"><a href="javascript:;">1</a></span><span><i>•••</i></span>` ; 
                        for( let i = this.pageNum - 5 ; i < this.pageNum ; i ++ ){
                            if( (i+1) == this.page ){
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;
                            } else {
                                str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;
                            }
                        } 
                    }
                } else {
                    for( let i = 0 ; i < this.pageNum ; i ++ ){
                        if( (i+1) == this.page ){
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;" class="active">${i+1}</a></span>`;
                        } else {
                            str += `<span class="pageStyle" myPage="${i+1}"><a href="javascript:;">${i+1}</a></span>`;
                        }
                    }
                }
                this.ele.innerHTML = `
                <span class="first"><a href="javascript:;"><img src="../images/first.png"></a></span>
                <span class="prev"><a href="javascript:;"><img src="../images/prev.png"></a></span>
                ${str}
                <span class="next"><a href="javascript:;"><img src="../images/next.png"></a></span>
                <span class="last"><a href="javascript:;"><img src="../images/last.png"></a></span>` ;
            }
            operate(){
                const _that = this ; 
                let firstEle = this.ele.querySelector(".first");
                let lastEle = this.ele.querySelector(".last");
                let nextEle = this.ele.querySelector(".next");
                let prevEle = this.ele.querySelector(".prev");
                let pageStyleEles = this.ele.querySelectorAll(".pageStyle");
                firstEle.onclick = function (){
                    _that.page = 1 ;
                    _that.cb(_that.page);
                }
                lastEle.onclick = function (){
                    _that.page = _that.pageNum ;
                    _that.cb( _that.page);
                }
                nextEle.onclick = function (){
                    if( _that.page < _that.pageNum ){
                        _that.page = _that.page + 1 ;
                        _that.cb(_that.page);
                    }
                }
                prevEle.onclick = function (){
                    if( _that.page > 1 ){
                        _that.page = _that.page - 1 ;
                        _that.cb(_that.page);
                    }
                }
                pageStyleEles.forEach(function(pageStyleEle){
                    pageStyleEle.onclick = function (){
                        _that.page = parseInt(this.getAttribute("myPage"));
                        _that.cb(_that.page);
                    }
                });
            }
        }
        let pageEle = document.querySelector(".pagination");
        let perPage = 10 ; 
        let page = 1 ;
        window.onload = async function (){
            ready(page);
        }
        async function ready(page){
            let tbodyEle = document.querySelector(".container table tbody");
            let res = await getList({perPage,page,opt:"getData"});
            renderDom( tbodyEle , res );
            new PageClass(pageEle , 5 , page , function(page){
                ready(page);
            });
        }
        function renderDom( ele , dataArr){
            ele.innerHTML = '' ;
            dataArr.forEach((item,key)=>{
                let trEle = document.createElement("tr");
                trEle.innerHTML = `
                <td>${key+1}</td>
                <td>${item['userName']}</td>
                <td>${item['passWord']}</td>
                ` ;
            ele.appendChild(trEle);
            });
        }
        
        new PageClass(pageEle , 5 , 2 , function(page){
            ready(page);
        });
        
    </script>
</body>
</html>